<template>
  <div class="PersonalCenter">
    <el-container style="padding: 0px 20px">
      <el-header>个人中心</el-header>
      <el-container>
        <el-aside width="400px">
          <el-col :span="12">
            <div class="sub-title"></div>
            <div class="demo-basic--circle">
              <div class="img">
                <el-avatar
                  :size="100"
                  :src="circleUrl"
                  align="center"
                ></el-avatar>
              </div>
              <div class="block">
                <span>{{perSonDate.username}}</span>
              </div>
            </div>
          </el-col>
          <el-input
            v-model="perSonDate.username"
            disabled
            type="text"
            placeholder="用户昵称"
            show-word-limit
          ></el-input>
          <el-input
            v-model="perSonDate.powerClone"
            type="text"
            disabled
            placeholder="用户权限"
            maxlength="2"
            show-word-limit
          ></el-input>
          <el-input
            v-model="perSonDate.email"
            type="text"
            placeholder="邮箱"
            disabled
            maxlength="100"
            show-word-limit
          ></el-input>
          <el-input
            v-model="perSonDate.oldPassworld"
            v-if="editorButton"
            type="text"
            placeholder="原始密码"
            maxlength="20"
            show-word-limit
          ></el-input>
          <el-input
            v-model="perSonDate.passWorld"
            v-if="editorButton"
            type="text"
            placeholder="修改秘密"
            maxlength="20"
            show-word-limit
          ></el-input>
          <el-button-group style="float: right; padding: 3px 0" type="text">
            <el-button type="primary" size="medium" round @click="editorButton = !editorButton">编辑</el-button>
            <el-button type="primary" size="medium" round @click="hanleSave">保存</el-button>
          </el-button-group>
        </el-aside>
        <el-container>
          <el-main>
            <el-card class="box-card" style="padding: 5px">
              <div slot="header" class="clearfix">
                <span style="float: left"><b>我的收藏</b></span>
              </div>
              <el-table
                :data="collData"
                style="width: 100%"
                :header-row-style="{
                  padding:'5px'
                }">
                <el-table-column
                  prop="worksId"
                  align="left"
                  label="标题">
                  <template slot-scope="scope">
                    <span class="oneButton" @click="gotoDetail(scope.row,'1')">
                      {{scope.row.worksId}}
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
            <el-card class="box-card" style="padding: 5px">
              <div>
                <div>
                  <span style="float: left" shadow="hover"><b>个人百科</b></span>
                  <span style="float: right" @click="addDiago('add')" class="zjbutton">新增</span>
                </div>
                <el-table
                  :data="bkData"
                  style="width: 100%"
                  :header-row-style="{
                  padding:'5px'
                }">
                  <el-table-column
                    prop="worksId"
                    align="left"
                    label="标题">
                    <template slot-scope="scope">
                    <span class="oneButton" @click="gotoDetail(scope.row,'0')">
                      {{scope.row.name}}
                    </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    align="left"
                    label="操作">
                    <template slot-scope="scope">
                   <span class="zjbutton" @click="bianjiBk(scope.row)">编辑</span>
                   <span class="zjbutton " style="color: red;" @click="deleteEvent(scope.row)">删除</span>
                    </template>
                  </el-table-column>
                </el-table>
                <!-- <span>螃蟹在剥我的壳</span>
                <el-divider></el-divider>
                <span>笔记本在写我</span>
                <el-divider></el-divider>
                <span>漫天的我落在枫叶的雪花上</span> -->
              </div>
            </el-card>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
    <el-dialog
      :title="type==='add'?'新增':'编辑'"
      :visible.sync="dialogVisible"
      width="90%"
      :before-close="handleClose">
      <div>
        <el-form :model="dialogData" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="中文名:" prop="name">
                 <el-input placeholder="请输入" v-model="dialogData.name" size="mini"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="别名" prop="bname">
                <el-input placeholder="请输入" v-model="dialogData.bname" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="界:" prop="kingdom">
                 <el-input placeholder="请输入" v-model="dialogData.kingdom" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
                <el-form-item label="门:" prop="phylum">
                   <el-input placeholder="请输入" v-model="dialogData.phylum" size='mini'></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚门:" prop="subPhylum">
                 <el-input placeholder="请输入" v-model="dialogData.subPhylum" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="纲" prop="gclass">
                 <el-input placeholder="请输入" v-model="dialogData.gclass" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚纲" prop="subClass">
                 <el-input placeholder="请输入" v-model="dialogData.subClass" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="目" prop="orderA">
                 <el-input placeholder="请输入" v-model="dialogData.orderA" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚目" prop="subOrder">
                 <el-input placeholder="请输入" v-model="dialogData.subOrder" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="科" prop="family">
                 <el-input placeholder="请输入" v-model="dialogData.family" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚科" prop="subFamily">
                 <el-input placeholder="请输入" v-model="dialogData.subFamily" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="属" prop="genus">
                 <el-input placeholder="请输入" v-model="dialogData.genus" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚属" prop="subGenus">
                 <el-input placeholder="请输入" v-model="dialogData.subGenus" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="种" prop="species">
                 <el-input placeholder="请输入" v-model="dialogData.species" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="亚种" prop="subSpecies">
                 <el-input placeholder="请输入" v-model="dialogData.subSpecies" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="分布区域" prop="distributionArea">
                 <el-input placeholder="请输入" v-model="dialogData.distributionArea" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="保护级别" prop="protectionLevel">
                 <el-input placeholder="请输入" v-model="dialogData.protectionLevel" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="二名法" prop="binomialNomenclature">
                 <el-input placeholder="请输入" v-model="dialogData.binomialNomenclature" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="爱吃食物" prop="food">
                 <el-input placeholder="请输入" v-model="dialogData.food" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="寿命" prop="lifeTime">
                 <el-input placeholder="请输入" v-model="dialogData.lifeTime" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="繁殖速度" prop="breed">
                 <el-input placeholder="请输入" v-model="dialogData.breed" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="对人影响" prop="affect">
                 <el-input placeholder="请输入" v-model="dialogData.affect" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="颜色" prop="colour">
                 <el-input placeholder="请输入" v-model="dialogData.colour" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="历史" prop="pastRecords">
                 <el-input placeholder="请输入" v-model="dialogData.pastRecords" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="天敌" prop="naturalEnemy">
                 <el-input placeholder="请输入" v-model="dialogData.naturalEnemy" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
          <el-col :span="12">
            <el-form-item label="生活习性" prop="lifeHabit">
               <el-input placeholder="请输入"  type="textarea" v-model="dialogData.lifeHabit" size='mini'></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="种群现状" prop="populationStatus">
               <el-input placeholder="请输入"  type="textarea" v-model="dialogData.populationStatus" size='mini'></el-input>
            </el-form-item>
          </el-col>
        </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="外形特征" prop="feature">
                 <el-input placeholder="请输入"  type="textarea" v-model="dialogData.feature" size='mini'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生长繁殖" prop="growthReproduction">
                 <el-input placeholder="请输入"  type="textarea" v-model="dialogData.growthReproduction" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row   class='rowStyle'>
            <el-col :span="12">
              <el-form-item label="疾病传播" prop="pathophoresis">
                 <el-input placeholder="请输入"  type="textarea" v-model="dialogData.pathophoresis" size='mini'></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
    <el-button type="primary" v-if="type==='add'" @click="addEvent()" size="mini">新增</el-button>
      <el-button type="primary" v-else @click="sureEvent()" size="mini">确定</el-button>
    </el-dialog>
  </div>
</template>
<script>
  const clonedialogData={
    name:'',
    bname:'',
    kingdom:'',
    phylum:'',
    subPhylum:'',
    gclass:'',
    subClass:'',
    orderA:'',
    subOrder:'',
    family:'',
    subFamily:'',
    genus:'',
    subGenus:'',
    species:'',
    subSpecies:'',
    distributionArea:'',
    protectionLevel:'',
    binomialNomenclature:'',
    food:'',
    lifeTime:'',
    breed:'',
    affect:'',
    pastRecords:'',
    naturalEnemy:'',
    lifeHabit:'',
    populationStatus:'',
    feature:'',
    growthReproduction:'',
    pathophoresis:'',
    colour:''
  }
export default {
  name: 'PersonalCenter',
  data () {
    return {
      type:'',
      rules:{},
      dialogData:{},
      dialogVisible:false,
      bkData:[],
      collData:[],
      text: '',
      perSonDate:{
        username:'',
        power:'',
        email:'',
        oldPassworld:'',
        passWorld:''
      },
      input1: '',
      input2: '',
      input3: '',
      input7:'',
      email: '',
      circleUrl:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      editorButton:false,//编辑状态
      changePassword:'',//修改密码
      confirmPassword:'',//确认密码
    }
  },
  methods: {
    getPersonDate(){
      var _this = this
      let user=JSON.parse( window.localStorage.getItem('userInfo') )
      this.$axios
        .post('/queryUser1', {
          username:user.username
        })
        .then(({data}) => {
          this.perSonDate=data.data
          if(data.data.power===1){
            this.perSonDate.powerClone='管理员'
          }else if(data.data.power===2){
            this.perSonDate.powerClone='作者'
          }if(data.data.power===3){
            this.perSonDate.powerClone='用户'
          }
        })
    },
    /**
     * 保存个人信息
     * */
    hanleSave(){
      let params={
        userName:this.perSonDate.username,
        oldPassword: this.perSonDate.oldPassworld,
        newPassword:this.perSonDate.passWorld,
      }
      this.$axios.post('/changePassword',params).then(()=>{
        this.$message.success('修改成功');
        // 清空sessionStorage
        window.sessionStorage.clear()
        this.$router.push({ name: 'Login' })
      }).catch(()=>{
        this.$message.success('修改失败，请联系管理员');
      })

    },
    // 校验二次输入密码
    checkPassword(){
      if(this.changePassword !== this.confirmPassword){
        this.$message.warning('俩次密码不一致请重新输入')
        return false
      }
      return true
    },
    /**
     * 修改确定
     */
    sureEvent(){
      this.$refs['form'].validate((valid) => {
        if(valid){
          this.$confirm('是否修改该条数据?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var _this = this
            let user=JSON.parse( window.localStorage.getItem('userInfo') )
            this.dialogData.authorId=user.username
            this.dialogData.validState=0
            this.$axios
              .post('/updateByInformation', this.dialogData)
              .then(({data}) => {
                this.$message.success('修改成功')
                this.selectgrbk()
                this.handleClose()
              })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消修改'
            });
          });
        }
      })
    },
    /**
     * 编辑弹窗打开
     */
    bianjiBk(row){
      this.addDiago('bianji')
      Object.keys(clonedialogData).forEach(key=>{
        this.$set(this.dialogData,key,row[key])
      })
    },
    /**
     * 删除
     */
    deleteEvent(row){
      this.$confirm('是否删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var _this = this
        let user=JSON.parse( window.localStorage.getItem('userInfo') )
        this.$axios
          .post('/deleteToCoupe', row)
          .then(({data}) => {
            this.$message.success('删除成功')
            this.selectgrbk()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /**
     * 查询百科
     */
    selectgrbk(){
      var _this = this
      let user=JSON.parse( window.localStorage.getItem('userInfo') )
      this.$axios
        .post('/queryByUserName', {
          authorId:user.username,
        })
        .then(({data}) => {
          this.bkData=data.data
        })
    },
    /**
     * 新增
     */
    addEvent(){
      this.$refs['form'].validate((valid) => {
        if(valid){
          var _this = this
          let user=JSON.parse( window.localStorage.getItem('userInfo') )
          this.dialogData.authorId=user.username
          this.$axios
            .post('/insertCoupe', this.dialogData)
            .then(({data}) => {
              this.$message.success('提交成功')
              this.handleClose()
            })
        }
      })
    },
    /**
     * 弹窗打开
     */
    addDiago(type){
      if(type==='add'){
        Object.keys(clonedialogData).forEach(key=>{
          this.$set(this.dialogData,key,'')
        })
      }
      console.log(this.dialogData);
      this.type=type
      this.rules={}
      Object.keys(clonedialogData).forEach(key=>{
        let obj={ required: true, message: '改内容为必填', trigger: 'blur' }
        this.rules[key]=obj
      })
      this.dialogVisible=true
    },
    /**
     * 弹窗关闭
     */
    handleClose(){
      Object.keys(clonedialogData).forEach(key=>{
        this.$set(this.dialogData,key,'')
      })
      this.type=''
      this.dialogVisible=false
    },
    clickColl(row){
      let user=JSON.parse( window.localStorage.getItem('user') )
      this.$axios
        .post('noAddCollection', {
          worksId: row.worksId,
          collectionUser:user.username,
        })
        .then(({data}) => {
          this.getCollDate()
        })
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    getCollDate(){
      const user=JSON.parse( window.localStorage.getItem('userInfo') );
      console.log(user);
      // var _this = this
      this.$axios
        .post('/queryCollection', {
          collectionUser:user.username,
        })
        .then(({data}) => {
          this.collData=data.data
          console.log(data,'收藏');
        })
    },
    gotoDetail(row,geyDatetype){
      this.$router.push({ name: 'SelectDetail', query: {selectData:row,type:'personal',geyDatetype} })
    }
  },
  mounted() {
    this.getCollDate()
    this.selectgrbk()
    this.getPersonDate()
  }
}
</script>
<style>
.el-header {
  line-height: 60px;
  text-align: center;
  background-color: #b3c0d1;
}
.el-aside {
  line-height: 44px;
  text-align: center;
  background-color: #d3dce6;
}
.el-main {
  line-height: 36px;
  text-align: center;
  background-color: #e9eef3;
}

.demo-basic--circle {
  align: "center";
  margin-top: 30px;
  margin-left: 150px;
}
.block {
  margin-left: 25px;
  font-weight: bold;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  border-radius: 30px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.zjbutton:hover{
  cursor: pointer;
}
element.style {
}
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #EBEEF5;
}
.el-table th.el-table__cell {
  overflow: hidden;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-color: #FFF;
}
.el-date-table, .el-table th.el-table__cell {
  -webkit-user-select: none;
  -moz-user-select: none;
}
.el-table .el-table__cell {
  padding: 5px 0px;
}
  .oneButton:hover{
    color:dodgerblue;
    cursor: pointer;
  }
.zjbutton:hover{
  color: #409eff;
  cursor: pointer;
}
</style>
